<template>
	<div class="AddGoods">
		<div class="head">
			添加商品
			<div class="box"></div>
			<button class="btn1" @click="$router.push('/backstage/goods')">BACK</button>
			<div class="clear"></div>
		</div>
		<div class="body">
			<Form :model="commodity" >
				<FormItem label="商品名">
					<Input v-model="commodity.commodity_name"></Input>
				</FormItem>
				<FormItem label="关键词">
					<Input v-model="commodity.key_word"></Input>
				</FormItem>
				<FormItem label="商品类型">
					<Input v-model="commodity.type"></Input>
				</FormItem>
				<FormItem label="价格">
					<Input v-model="commodity.price" type="number"></Input>
				</FormItem>
				<FormItem label="商品信息">
					<Input v-model="commodity.commodity_info"></Input>
				</FormItem>
				<div v-if="file !== null">
					<Button class="btn2" size="large" type="success" :loading="loadingStatus" @click="upload">创建商品</Button>
				</div>
				<Upload ref="img" action="/Shop/Index/upload" :before-upload="handleUpload" :data="{img_name:this.commodity.commodity_name,shop_id:this.commodity.shop_id}">
					<Button icon="ios-cloud-upload-outline">上传图片</Button>
					<div v-if="file !== null"> 文件: {{ file.name }} </div>
				</Upload>
			</Form>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				commodity:{
					commodity_name:'',
					commodity_info:'',
					price:'',
					key_word:'',
					type:'',
					shop_id:this.$store.state.id.id,
				},
				file : null,
				loadingStatus: false,
			}
		},
		 async mounted() {

		},
		methods:{
			handleUpload (file) {
				this.file = file;
				return false;
			},
			async upload () {
				this.loadingStatus = true;
				let data = await this.$axios.post('/Shop/Index/CommodityInsert', this.commodity).then(r => r.data)
				setTimeout(() => {
					if (data.state) {
						this.loadingStatus = false;
						this.$refs.img.post(this.file)
						this.$Message.success('创建成功')
						this.file = null;
					}else{
						this.loadingStatus = false;
						this.$Message.success('创建失败`	')
					}
				}, 1500);
			}
		}
	}
</script>

<style lang="less">
	.AddGoods{
		max-width: 700px;
		margin: auto;
		.head {
			height: 35px;
			line-height: 35px;
			color: aliceblue;
			width: 100%;
			background: #de393e;
			font-size: 22px;
			text-align: center;
			padding-right: 84px;
		}
		.box {
			width: 0;
			height: 0;
			margin-top: 7px;
			margin-left: 15px;
			float: left;
			border-top: 11px solid transparent;
			border-bottom: 11px solid transparent;
			border-left: 11px solid transparent;
			border-right: 11px solid aliceblue;
		}
		.clear {
			clear: both;
		}
		.btn1 {
			background: aliceblue;
			font-size: 16px;
			margin-top: 7px;
			margin-left: -1px;
			color: #de393e;
			height: 22px;
			line-height: 22px;
			padding: 0px 5px;
			border: 1px aliceblue solid;
			border-radius: 10%;
			cursor: pointer;
			float: left;
		}
		.body{
			padding: 20px;
		}
		.btn2{
			float: right;
		}
		.ivu-upload{
			float: left;
			max-width: 65%;
		}
	}
</style>